<template>
  <!-- 开户银行 -->
  <div>
    <div class="middle-box">
      <span class="title"> 开户银行 </span>
    </div>
    <div class="btn">
      <span class="btn_left">
        <el-button type="primary" @click="createNew">新增</el-button>
        <el-button @click="deleteSelectData">删除</el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
    >
      <el-table-column align="center" type="selection" width="50" fixed />
      <el-table-column align="center" label="开户银行">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.bankName"
              ref="ctnSealRef"
              clearable
              size="small"
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.bankName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="银行账号">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.accountNo"
              ref="ctnSealRef"
              clearable
              size="small"
              placeholder="请输入"
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.accountNo }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账户名称">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.accountName"
              ref="ctnSealRef"
              clearable
              size="small"
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.accountName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="币种">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <selectDown
              v-model:modelData="scope.row.currency"
              ref="truckCodeRef"
              placeholder="请输入"
              urlType="currency"
              urlQueryData="账户类别"
            >
            </selectDown>
            <!-- @getOption="getTruckCodeData($event, scope.$index)" -->
          </div>
          <span v-else>
            {{ scope.row.currency }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建开户银行 -->
    <!-- @close="closeDiag" -->
    <el-dialog
      title="开户银行"
      v-model="dialogData.create_bankInfo_show"
      width="448px"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        label-width="70px"
        label-suffix=":"
        ref="form"
      >
        <el-row>
          <el-col>
            <el-form-item label="银行名称" prop="bankName">
              <el-input
                v-model="formData.bankName"
                style="max-width: 600px"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="银行账户" prop="accountNo">
              <el-input
                v-model="formData.accountNo"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="账户名称" prop="accountName">
              <el-input
                v-model="formData.accountName"
                style="max-width: 600px"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="币种" prop="currency">
              <selectDown
                v-model:modelData="formData.currency"
                ref="truckCodeRef"
                placeholder="请选择"
                urlType="currency"
                urlQueryData="账户类别"
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, toRaw } from "vue";
import selectDown from "./selectDown.vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  props: {
    isNew: {
      type: Boolean,
      default: "",
    },
  },
  components: {
    selectDown,
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
    option: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      props: {
        isNew: {
          type: Boolean,
          default: "",
        },
      },
      query: {
        KeyWords: "",
      },
      tableData: [],
      compareTableData: [],
      formData: {
        id: 0,
        createBy: "",
        createTime: "2024-05-15T08:38:37.919Z",
        updateBy: "",
        updateTime: "",
        isDeleted: true,
        contactComId: 0,
        bankName: "",
        accountNo: "",
        accountName: "",
        currency: "",
        useState: true,
      },
      columnIndex: -1,
      rowIndex: -1,
      isUpdatess: false,
      formRules: {
        bankName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
      },
      tableSelect: [],
      loading: false,
      dialogData: {
        create_bankInfo_show: false,
      },
      options: [
        {
          value: "股份有限公司",
          label: "股份有限公司",
        },
        {
          value: "科技有限公司",
          label: "科技有限公司",
        },
        {
          value: "互联网公司",
          label: "互联网公司",
        },
        {
          value: "制造业公司",
          label: "制造业公司",
        },
        {
          value: "石油公司",
          label: "石油公司",
        },
      ],
    };
  },
  methods: {
    clickColumn(e) {
      console.log(e);
    },
    getList() {
      //获取开户银行列表
      this.$http
        .get("/api/cropeningbank/queryby", {
          Id: this.$route.query.id,
        })
        .then((res) => {
          console.log("开户银行res", res);
          if (res.data.length) {
            this.tableData = res.data;
            this.compareTableData = JSON.parse(JSON.stringify(res.data))
          }
        });
    },
    resetTableData() {
      console.log('this.compareTableData', this.compareTableData);
      this.tableData = JSON.parse(JSON.stringify(this.compareTableData))
    },
    // 新增
    createNew() {
      this.closeDiag();
      this.dialogData.create_bankInfo_show = true;
    },
    handleSelectionChange(val) {
      let arr = [];
      for (let item of val) {
        let ret = toRaw(item);
        if (ret !== undefined) {
          arr.push(ret);
        }
      }
      this.tableSelect = arr;
    },
    // 批量删除
    deleteSelectData() {
      let deleteSelectArray = [];
      if (this.tableSelect.length > 0) {
        deleteSelectArray = this.tableSelect.map((item) => {
          return item.id;
        });

        ElMessageBox.confirm("确定删除所选开户银行信息吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            for (let i = 0; i < deleteSelectArray.length; i++) {
              this.tableData = this.tableData.filter(
                (item) => item.id != deleteSelectArray[i]
              );
            }
          })
          .catch(() => {
            this.$message.info("取消删除");
          });
      } else {
        this.$message.warning("请先选择");
      }
    },
    cancel() {
      this.dialogData.create_bankInfo_show = false;
      this.$refs.form.clearValidate();
    },
    closeDiag() {
      this.formData.bankName = "";
      this.formData.accountNo = "";
      this.formData.accountName = "";
      this.formData.currency = "";
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    async save() {
      // 点击新增
      await this.$refs.form.validate();
      this.tableData.push({
        id: this.tableData.length + 1,
        createBy: "",
        createTime: "2024-5-18 20:00:00",
        updateBy: "",
        updateTime: "",
        isDeleted: true,
        contactComId: this.$route.query.id,
        bankName: this.formData.bankName,
        accountNo: this.formData.accountNo,
        accountName: this.formData.accountName,
        currency: this.formData.currency,
        useState: true,
      });
      this.dialogData.create_bankInfo_show = false;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
  },
  mounted() {
    this.getList();
  },
  watch: {
    tableData: {
      handler: async function (newVal) {
        if (this.isUpdatess) {
          this.$emit("acceptData", newVal);
          this.$emit("openingBankData", newVal);
        }
        this.isUpdatess = true
      },
      deep: true,
    },
  },
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
  // margin-top: -8px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
.btn {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
</style>
